<template>
    <el-col :span="8">
        <br>
        <br>
        <br>
        <br>
        <el-form ref="loginForm" :rules="loginRules" :model="loginForm" label-width="95px">
            <el-form-item label="服务器 : " prop="ip">
                <el-input v-model="loginForm.ip" placeholder="服务器连接地址"></el-input>
            </el-form-item>
            <el-form-item label="账户 : " prop="username">
                <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码 : " prop="password">
                <el-input v-model="loginForm.password" show-password placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-checkbox label="记住密码" v-model="loginForm.remember" name="type"></el-checkbox>
                <span class="registList" @click="changeStatus('regist')">注册</span>
            </el-form-item>
            <el-form-item label="">
                <el-button-group>
                    <el-button type="primary" @click="submit" style="width:100%;">登 录</el-button>
                </el-button-group>
            </el-form-item>
        </el-form>
    </el-col>
</template>
<script>
export default {
    props: ['changeStatus', 'changeUserData'],
    data() {
        return {
            loginRules: {
                ip: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            },
            loginForm: {
                ip: '',
                username: '',
                password: '',
                remember: false,
            },
        }
    },
    mounted() {
        var message = localStorage.getItem('UserLoginInfo');
        if (message) {
            message = message.split('$|$');
            this.loginForm = {
                ip: message[0],
                username: message[1],
                password: message[2],
                remember: true,
            };
        };
    },
    methods: {
        submit() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    window.action.userLogin(this.loginForm.ip, this.loginForm, (res) => {
                        this.changeUserData(res, this.loginForm.ip);
                        if (this.loginForm.remember) {
                            localStorage.setItem('UserLoginInfo', this.loginForm.ip + '$|$' + this.loginForm.username + '$|$' + this.loginForm.password);
                        } else {
                            localStorage.removeItem('UserLoginInfo');
                        };
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                    });
                }
            });
        },
    },
}
</script>
<style scoped>
    .el-button-group { display: block;}
    .registList { color: #198cff; float: right; cursor: pointer;}
</style>